<script setup>
const props = defineProps({
  steps: { type: Array, default: () => ([]) },
})
</script>

<template>
  <div class="timeline">
    <div v-for="(s, i) in steps" :key="i" class="node">
      <div class="dot" :class="s.status" />
      <div class="content">
        <div class="row1">
          <strong>{{ s.title }}</strong>
          <small class="time">{{ s.time }}</small>
        </div>
        <div class="row2">{{ s.comment || '—' }}</div>
      </div>
    </div>
  </div>
  
</template>

<style scoped>
.timeline { display: flex; flex-direction: column; gap: 14px; }
.node { display: grid; grid-template-columns: 16px 1fr; gap: 12px; }
.dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; background: var(--color-primary); box-shadow: 0 0 0 3px rgba(255, 105, 0, 0.15); }
.dot.approved { background: var(--color-success); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15); }
.dot.rejected { background: var(--color-danger); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }
.content { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 10px 12px; }
.row1 { display: flex; align-items: center; justify-content: space-between; }
.row1 .time { color: var(--muted-text); }
.row2 { color: #333; margin-top: 6px; }
</style>



